<template>
  <div style="height: 50px;" class="headerContainer">
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16" style="text-align: center;">
        <span class="sheetName">{{ info.title }}</span>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <el-button type="primary" class="save" size="default" icon="Check" @click="save">保存</el-button>
      </el-col>
    </el-row>
  </div>
  <div id="luckysheet" style="height: calc(100% - 50px);overflow-y: scroll;"></div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { post } from '@/utils/httpRequest'
import { queryMySpaceByIdUrl, updateMySpaceByIdUrl } from '@/api/space'
import { ElMessage } from 'element-plus'

export default {
  name: 'excel',
  setup () {
    const route = useRoute()
    const list = ref([])
    const total = ref(40)
    const info = ref({})
    const save = async () => {
      info.value.content = JSON.stringify(window.luckysheet.getAllSheets())
      const result = await post(updateMySpaceByIdUrl, info.value)
      if (result.code === 200) {
        ElMessage.success('保存成功')
      }
    }
    const options = {
      container: 'luckysheet', // luckysheet为容器id
      lang: 'zh',
      title: '1111',
      showinfobar: false,
      showtoolbarConfig: {
        image: false,
        postil: false,
        pivotTable: false,
        screenshot: false,
        splitColumn: false,
        print: false,
        protection: false
      },
      showstatisticBarConfig: {
        count: false, // 计数栏
        view: false, // 打印视图
        zoom: false // 缩放
      },
      cellRightClickConfig: {
        chart: false,
        image: false,
        matrix: false,
        cellFormat: false,
        sort: false,
        filter: false,
        data: false
      },
      data: [
        {
          name: '工作表1',
          color: '',
          status: '1',
          order: '0',
          data: [],
          config: {},
          index: 0
        }
      ]
    }
    const querySpaceByIdAsync = async () => {
      const result = await post(queryMySpaceByIdUrl, { id: route.query.id })
      if (result.code === 200) {
        info.value = result.data
        options.data = JSON.parse(info.value.content)
      }
    }
    onMounted(async () => {
      await querySpaceByIdAsync()
      window.luckysheet.create(options)
    })
    return {
      info,
      save,
      list,
      total
    }
  }
}
</script>

<style scoped lang="less">
.headerContainer {
  line-height: 50px;
  padding: 0 20px;

  .sheetName {
    color: red;
    font-size: 18px;
  }
}
</style>
